<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>header</title>
</head>
<body>
<!-- 顶栏 -->
<!-- begin::header -->
<div th:fragment="header" class="header">

    <!-- begin::header left -->
    <ul class="navbar-nav">

        <!-- begin::navigation-toggler -->
        <li class="nav-item navigation-toggler">
            <a href="javascript:void(0)" id="smallNavBtn" class="nav-link">
                <i data-feather="menu"></i>
            </a>
        </li>
        <!-- end::navigation-toggler -->

        <!-- begin::header-logo -->
        <li class="nav-item" id="header-logo">
            <a href="/index">
                <img class="logo" src="assets/media/image/logo.png" alt="logo">
                <img class="logo-sm" src="assets/media/image/logo-sm.png" alt="small logo">
                <img class="logo-dark" src="assets/media/image/logo-dark.png" alt="dark logo">
            </a>
        </li>
        <!-- end::header-logo -->
    </ul>
    <!-- end::header left -->

    <!-- begin::header-right -->
    <div class="header-right">
        <ul class="navbar-nav">

            <!-- begin::search-form -->
            <li class="nav-item search-form">
                <div class="row">
                    <div class="col-md-6">
                        <form>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search">
                                <div class="input-group-append">
                                    <button class="btn btn-default" type="button">
                                        <i data-feather="search"></i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
            <!-- end::search-form -->

            <!-- begin::header minimize/maximize -->
            <li class="nav-item dropdown">
                <a href="#" class="nav-link" title="Fullscreen" data-toggle="fullscreen">
                    <i class="maximize" data-feather="maximize"></i>
                    <i class="minimize" data-feather="minimize"></i>
                </a>
            </li>
            <!-- end::header minimize/maximize -->

            <!-- begin::header messages dropdown -->
            <li class="nav-item dropdown">
                <!--/*@thymesVar id="noticeNum" type="java.lang.Integer"*/-->
                <a class="nav-link" th:class="(${noticeNum} != 0) ? 'nav-link-notify':''" title="Messages" data-toggle="dropdown">
                    <i data-feather="message-circle"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-big" id="notice">
                    <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                        <h6 class="mb-1">Notice</h6>
                        <small class="font-size-11 opacity-7">[[${noticeNum}]] unread messages</small>
                    </div>
                    <div>
                        <ul class="list-group list-group-flush"><!--th:each="${noticeList}"-->
                            <li>
                                <a href="javascript:void(0)" class="list-group-item d-flex hide-show-toggler">
                                    <div>
                                        <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-success-bright text-success rounded-circle">
                                                    <i class="ti-user"></i>
                                                </span>
                                        </figure>
                                    </div>
                                    <div class="flex-grow-1">
                                        <p class="mb-0 line-height-20 d-flex justify-content-between">
                                            [[${session.noticeContent}]]
                                        </p>
                                        <div class="small text-muted">
                                            <span th:text="(${session.noticeTime} == 'null') ? '':'时间'"></span><br>
                                            <span class="mr-2" th:text="(${session.noticeTime} == 'null') ? '' : ${#dates.format(session.noticeTime,'yyyy-MM-dd HH:mm')}"></span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="p-2 text-right">
                        <ul class="list-inline small">
                            <li class="list-inline-item">
                                <a href="javascript:void(0)" id="closeNoticeBtn">知道了</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <!-- end::header messages dropdown -->

            <!-- begin::header notification dropdown -->
            <li class="nav-item dropdown">
                <!--/*@thymesVar id="sysMsgNum" type="java.lang.Integer"*/-->
                <a href="#" class="nav-link" th:class="(${sysMsgNum} != 0) ? 'nav-link-notify':''" title="Notifications" data-toggle="dropdown">
                    <i data-feather="bell"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right dropdown-menu-big" id="sysMsg">
                    <div class="p-4 text-center" data-backround-image="assets/media/image/image1.png">
                        <h6 class="mb-1">System Message</h6>
                        <small class="font-size-11 opacity-7">[[${sysMsgNum}]] unread System Message</small>
                    </div>
                    <div>
                        <ul class="list-group list-group-flush"><!--th:each="${sysMsgList}"-->
                            <li>
                                <a href="javascript:void(0)" class="list-group-item d-flex hide-show-toggler">
                                    <div>
                                        <figure class="avatar avatar-sm m-r-15">
                                                <span class="avatar-title bg-warning-bright text-warning rounded-circle">
                                                    <i class="ti-package"></i>
                                                </span>
                                        </figure>
                                    </div>
                                    <div class="flex-grow-1">
                                        <p class="mb-0 line-height-20 d-flex justify-content-between">
                                            [[${session.systemContent}]]
                                        </p>
                                        <span class="text-muted small" th:text="${session.systemTime eq 'null'}?'':'时间'"></span><br>
                                        <span class="mr-2"th:text="${session.systemTime eq 'null'}?'':${#dates.format(session.systemTime,'yyyy-MM-dd HH:mm')}"></span>
                                        <!-- -->
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="p-2 text-right">
                        <ul class="list-inline small">
                            <li class="list-inline-item">
                                <a href="javascript:void(0)" id="closeSysMsgBtn">知道了</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <!-- end::header notification dropdown -->
        </ul>

        <!-- begin::mobile header toggler -->
        <ul class="navbar-nav d-flex align-items-center">
            <li class="nav-item header-toggler">
                <a href="javascript:void(0)" class="nav-link">
                    <i data-feather="arrow-down"></i>
                </a>
            </li>
        </ul>
        <!-- end::mobile header toggler -->
    </div>
    <!-- end::header-right -->
</div>
<!-- end::header -->

</body>
</html>